<%--
  Created by IntelliJ IDEA.
  author: Jsonor
  date: 2018/4/18 14:55
  description: Description
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>Home</title>
  <!-- Meta tag Keywords -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8"/>
  <meta name="keywords" content=""
  />
  <script>
    addEventListener("load", function () {
      setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
      window.scrollTo(0, 1);
    }
  </script>
  <!--// Meta tag Keywords -->
  <!-- css files -->
  <link rel="stylesheet" href="../../css/bootstrap.css" type="text/css" media="all">
  <!-- Bootstrap-Core-CSS -->
  <link rel="stylesheet" href="../../css/font-awesome.css" type="text/css" media="all">
  <!-- Font-Awesome-Icons-CSS -->
  <link rel="stylesheet" href="../../css/owl.carousel.css" type="text/css" media="all"/>
  <!-- Owl-Carousel-CSS -->
  <link rel="stylesheet" href="../../css/style.css" type="text/css" media="all"/>
  <!-- Style-CSS -->
  <!-- //css files -->
  <!-- web fonts -->
  <link href="http://fonts.googleapis.com/css?family=Molle:400i&amp;subset=latin-ext"
        rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;subset=latin-ext"
        rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext"
        rel="stylesheet">
  <!-- //web fonts -->
  <link rel="stylesheet" type="text/css" href="../../css/style.css"/>


  <link href="${pageContext.request.contextPath}/cart/css/bootstrap.css" rel="stylesheet"
        type="text/css" media="all"/>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="${pageContext.request.contextPath}/cart/js/jquery.min.js"></script>

  <!-- Custom Theme files -->
  <!--theme style-->
  <link href="${pageContext.request.contextPath}/cart/css/style.css" rel="stylesheet"
        type="text/css" media="all"/>
  <!--//theme style-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="keywords" content="Wedding Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
  <script type="application/x-javascript"> addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
  }, false);

  function hideURLbar() {
    window.scrollTo(0, 1);
  } </script>
  <!-- start menu -->
  <script src="${pageContext.request.contextPath}/cart/js/simpleCart.min.js"></script>
  <!-- start menu -->
  <link href="${pageContext.request.contextPath}/cart/css/memenu.css" rel="stylesheet"
        type="text/css" media="all"/>
  <script type="text/javascript"
          src="${pageContext.request.contextPath}/cart/js/memenu.js"></script>
  <script>$(document).ready(function () {
    $(".memenu").memenu();
  });</script>
  <!-- /start menu -->
  <link href="${pageContext.request.contextPath}/cart/css/form.css" rel="stylesheet" type="text/css"
        media="all"/>
  <!-- the jScrollPane script -->
  <script type="text/javascript"
          src="${pageContext.request.contextPath}/cart/js/jquery.jscrollpane.min.js"></script>
  <script type="text/javascript" id="sourcecode">
    $(function () {
      $('.scroll-pane').jScrollPane();
    });
  </script>
</head>
<body>
<!-- sticky navigation -->
<%--<div class="nav-links">
  <nav class='navbar navbar-default'>
    <div class='container'>
      <div class='navbar-header'>
        <button type='button' class='navbar-toggle' data-toggle='collapse'
                data-target='.navbar-collapse'>
          <span class='sr-only'>Toggle Navigation</span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>
      </div>
      <div class='collapse navbar-collapse'>
        <ul>
          <li>
            <a href="../../index.jsp">主页</a>
          </li>
          <li>
            <a href="#about" class="scroll">关于我们</a>
          </li>
          <li>
            <a href="#services" class="scroll">服务</a>
          </li>
          <li>
            <a href="#blog" class="scroll">种类</a>
          </li>
          <li>
            <a href="#team" class="scroll">团队</a>
          </li>
          <li>
            <a href="#gallery" class="scroll">相册</a>
          </li>
          <li>
            <a href="#contact" class="scroll">联系我们</a>
          </li>
          <li>
            <a href="../../login/login.jsp" class="">登录</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>--%>
<jsp:include page="../../top.jsp"/>
<!-- //sticky navigation -->

<div class="services" id="services">
  <div class="container">

    <h3 class="agile-title">可预购的猫咪</h3>
    <div class="w3_agile_services_grids">

      <%--forech属性查询数据--%>
      <c:forEach var="c" items="${CatSpeciesList}" varStatus="status">
      <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid " data-aos="zoom-in">

          <%--<legend>${c.catName}</legend>--%>
          <%--<div style="float: left">
            <table style="width:100%;border:1px white ">
              <tr bgcolor="#4F81BD"style="color: #fff;">
                <th style="size: 20px">种类</th>
                <th style="size: 20px">性别</th>
                <th style="size: 20px">生日</th>
                <th style="size: 20px">驱虫</th>
                <th style="size: 20px">疫苗</th>
              </tr>
            </table>
          </div>
            <div style="float: right">
              <tr bgcolor="${status.index%2 == 0?'#D0D8E8':'#E9EDF4'}">
                <th align="center">${c.catSpecies}</th>
                <th align="center">${c.bloodliness}</th>
                <th align="center">${c.sex}</th>
                <th align="center">${c.birthday}</th>
                <th align="center">${c.vaccine}</th>
              </tr>
            </div>--%>
          <%--<table style="width:100%;border:1px white ">
            <tr bgcolor="#4F81BD"style="color: #fff;">
              <th style="text-align: center">种类</th>
              <th style="text-align: center">性别</th>
              <th style="text-align: center">生日</th>
              <th style="text-align: center">驱虫</th>
              <th style="text-align: center">疫苗</th>
            </tr>
            <tr bgcolor="${status.index%2 == 0?'#D0D8E8':'#E9EDF4'}">
              <th align="center">${c.catSpecies}</th>
              <th align="center">${c.bloodliness}</th>
              <th align="center">${c.sex}</th>
              <th align="center">${c.birthday}</th>
              <th align="center">${c.vaccine}</th>
            </tr>
          </table>--%>
            <form action="/user/addCart.do">
        <a href="single.html"><div class="ih-item circle effect1 agile_services_grid">
          <div class="spinner"></div>
          <div class="img">
            <img src="${pageContext.request.contextPath}/${c.image}" alt=" "
                 class="img-responsive"/>
          </div>
        </div>
          <div style="padding-left: 30%" class="product-grid">
            <div class="more-product"><span> </span></div>
            <%--<div class="product-img b-link-stripe b-animate-go  thickbox">--%>

                <%--<img src="${pageContext.request.contextPath}/${c.image}" class="img-responsive" alt=""/>--%>
            <%--</div>--%>
        </a>
        <div class="product-info simpleCart_shelfItem">
          <div class="product-info-cust prt_name">
            <h4>${c.catName}</h4>
            <input type="hidden" name="catid" value="${c.id}"/>
            <span class="item_price">￥${c.price}</span>
            <div class="ofr">
              <p class="pric1">
                <del>￥${c.price/0.85}</del>
              </p>
              <p class="disc">[15%Off]</p>
            </div>
            <button style="margin-left: 0px" class="item_add items">ADD</button>
            <%--<input style="margin-left: 0px" type="button"  class="item_add items" value="ADD">--%>
          </div>
        </div>
      </div>
    </div>
    </form>
    </c:forEach>

    <div class="clearfix"></div>
  </div>
</div>
</div>
</div>
<div class="w3l-img-side">
  <img src="../../images/cat11.png" alt=""/>
</div>
<div class="w3l-img-side w3l-img-side2">
  <img src="../../images/cat1.png" alt=""/>
</div>
</div>
<!-- footer -->
<section class="footer-w3">
  <div class="container">
    <div class="col-lg-4 col-md-4 col-sm-4 footer-agile1" data-aos="zoom-in">
      <h3>Some More</h3>
      <p class="footer-p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ligula
        ac metus finibus hendrerit sed at libero. Praesent
        blandit dignissim elit, vel feugiat nulla porta a. Praesent tellus eros, consectetur quis
        tortor at, tempor varius quam.
      </p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 footer-mid-w3" data-aos="zoom-in">
      <h3>Instagram Posts</h3>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f1.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f2.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f3.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f4.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f5.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="agileinfo_footer_grid1">
        <a href="#">
          <img src="../../images/f6.jpg" alt=" " class="img-responsive">
        </a>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 footer-agile1" data-aos="zoom-in">
      <h3>Latest Tweets</h3>
      <ul class="tweet-agile">
        <li>
          <i class="fa fa-twitter-square" aria-hidden="true"></i>
          <p class="tweet-p1">
            <a href="mailto:support@company.com">@example</a> sit amet consectetur adipiscing.
            <a href="#">http://ax.by/zzzz</a>
          </p>
          <p class="tweet-p2">Posted 3 days ago.</p>
        </li>
        <li>
          <i class="fa fa-twitter-square" aria-hidden="true"></i>
          <p class="tweet-p1">
            <a href="mailto:support@company.com">@example</a> sit amet consectetur adipiscing.
            <a href="#">http://cx.dy/zzzz</a>
          </p>
          <p class="tweet-p2">Posted 3 days ago.</p>
        </li>
      </ul>
    </div>
    <div class="clearfix"></div>
  </div>
</section>
<!-- copyright -->
<div class="w3layouts_copy_right">
  <div class="container">
    <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                 href="http://www.aspku.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </p>
  </div>
</div>
<!-- //copyright -->
<!-- //footer -->
<!-- js -->
<script src="../../js/jquery-2.2.3.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->


<!-- Sticky Navigation Script -->
<script>
  $(window).scroll(function () {
    if ($(window).scrollTop() >= 795) {
      $('nav').addClass('fixed-header');
    } else {
      $('nav').removeClass('fixed-header');
    }
  });

  /* scrollTop() >= 795
   Should be equal the the height of the header
   */
</script>
<!-- //Sticky Navigation Script -->


</body>
</html>
